<template>
  <scroll-view
    scroll-y
    class="recommend_view"
    @scrolltolower="handleToLower"
    v-if="recommend.length > 0"
  >
    <view class="recommend_wrap">
      <navigator
        class="recommend_item"
        v-for="item in recommend"
        :key="item.id"
        :url="`/pages/album/index?id=${item.target}`"
      >
        <image mode="widthFix" :src="item.thumb"></image>
      </navigator>
    </view>
    <view class="months_wrap">
      <view class="months_title">
        <view class="months_title_info">
          <view class="months_info">
            <text>{{ months.DD }} /</text>{{ months.MM }} 月
          </view>
          <view class="months_text">{{ months.title }}</view>
        </view>
        <view class="months_title_more">更多 ></view>
      </view>
      <view class="months_content">
        <view
          class="months_item"
          v-for="(item, index) in months.items"
          :key="item.id"
        >
          <go-detail :list="months.items" :index="index">
            <image
              mode="aspectFill"
              :src="item.thumb + item.rule.replace('$<Height>', 360)"
            ></image>
          </go-detail>
        </view>
      </view>
    </view>
    <view class="hots_wrap">
      <view class="hots_title">热门</view>
      <view class="hots_content">
        <view class="hots_item" v-for="(item, index) in hots" :key="item.id">
          <go-detail :list="hots" :index="index">
            <image mode="aspectFill" :src="item.thumb"></image>
          </go-detail>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDatil";
export default {
  components: {
    goDetail,
  },
  data() {
    return {
      recommend: [],
      months: {},
      hots: [],
      params: {
        limit: 30,
        order: "hot",
        skip: 0,
      },
      hasMore: true,
    };
  },
  mounted() {
    uni.setNavigationBarTitle({ title: "首页" });

    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params,
      }).then((res) => {
        if (res.res.vertical === 0) {
          this.hasMore = false;
          return;
        }
        if (this.recommend.length === 0) {
          this.recommend = res.res.homepage[1].items;
          this.months = res.res.homepage[2];
          this.months.MM = moment(this.months.stime).format("MM");
          this.months.DD = moment(this.months.stime).format("DD");
        }
        this.hots = [...this.hots, ...res.res.vertical];
      });
    },
    handleToLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        clearInterval(Timer);
        let Timer = setInterval(() => {
          this.getList();
          clearInterval(Timer);
        }, 1000);
      } else {
        uni.showToast({
          title: "已是最后一页",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.recommend_view {
  height: calc(100vh - 36px);
}

.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}

.months_wrap {
  .months_title {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    .months_title_info {
      display: flex;
      .months_info {
        color: #d52a7e;
        font-size: 30rpx;
        text {
          font-size: 36rpx;
        }
      }

      .months_text {
        color: #666;
        margin-left: 10rpx;
        font-size: 36rpx;
      }
    }

    .months_title_more {
      color: #d52d7e;
      font-size: 24rpx;
    }
  }

  .months_content {
    display: flex;
    flex-wrap: wrap;
    .months_item {
      width: 33.33%;
      border: #fff solid 5rpx;
    }
  }
}

.hots_wrap {
  .hots_title {
    padding: 20rpx;
    margin: 10rpx 0;
    border-left: 10rpx #d52a7e solid;
    font-size: 36rpx;
    font-weight: 600;
  }
  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hots_item {
      width: 33.33%;
      border: #fff solid 5rpx;
    }
  }
}
</style>